<template>
	<!--电卡使用情况-->
	<view>
		<view class="head_bg" style="height:350rpx;">
			<view class="margin-sm">
				<view class="card-use">
					<image src="../../../common/img/zhanghao.png" class="card-img"></image>
					<text class="card-text">{{cardno}}</text>
					<text class="textright">¥
					<text class="card-no">{{balance}}</text></text>
				</view>
			</view>
		   <view class="equ_list" v-for="(info,index) in list" :key="index">
			<view class="ele_title" style="padding-top:20rpx;">
				<view class="ele_title_left">
					<view class="ele_title_inner" style="font-size:34rpx;">{{info.residential_quarters_name}}</view>
					<view class="ele_address">
						<image class="ele_address_img" src="../../../common/img/dizhi_hui.png" mode=""></image>
						<text>{{info.residential_quarters_address}}</text>
					</view>
				</view>
				<view v-if="info.task_state=='待充电'" style="color: grey;" class="falt_status">{{info.task_state}}</view>
				<view v-if="info.task_state=='充电中'" style="color: green;" class="falt_status">{{info.task_state}}</view>
				<view v-if="info.task_state=='失败'" style="color: red;" class="falt_status">{{info.task_state}}</view>
				<view v-if="info.task_state=='异常'" style="color: #F86B2A;" class="falt_status">{{info.task_state}}</view>
				<view v-if="info.task_state=='已完成'" style="color: #000000;" class="falt_status">{{info.task_state}}</view>
			</view>
			<view class="equ_list_inner">
				<view v-if="info.task_state!='待充电'" class="equ_list_inner_text">充电方式：
				   <text v-if="info.charging_method==1">按量</text> 
				   <text v-if="info.charging_method==0">按时</text>
				   <text v-if="info.charging_method==2">按电费</text>
				</view> 
				<view class="equ_list_inner_text">终端编号：{{info.equipment_number}}</view>
				<view v-if="info.task_state==2" class="equ_list_inner_text">充电时长：{{info.charging_minutes}}</view>
				<view class="equ_list_inner_text padding-bottom-sm">开始时间：{{info.begin_time}} ~ {{info.end_time}}</view>
			</view>
			<view class="count_bottom padding-sm" style="padding:30rpx 0;">
				<text class="text-red">{{info.abnormal_causes}}</text>
				<text style="float: right;">
					结算：
					<text class="count_bottom_inner_1">￥</text>
					<text class="count_bottom_inner_2">{{info.consumption_amount}}</text>
				</text>
			</view>
		   </view>
	   </view>
	   <view style="height:100rpx;"></view>
	   <view v-if="list.length==0" class="text-center">
	   	  <image src='../../../common/img/no_data.png' style="width:275rpx;height:312rpx;"></image>
	   </view>
	  <!-- <view v-if="list.length>0" class="foot text-black text-df text-center bg-white padding-sm padding-left-lg be-gray">
	   	{{loadingTxt}} 共({{list.length}}条记录)
	   </view> -->
	</view>
</template>

<script>
	let page=1,timer=null
	export default {
		data() {
			return {
				cardno:'',
				list:[],
				balance:0
			}
		},
		onLoad(options) {
			this.cardno=options.no;
			this.balance=options.balance
		},
		onShow() {
			page=1;
			this.list=[];
			this.getlist();
		},
		methods: {
			getlist(){
				let that=this;
				that.http.tokenreq({
					url: 'card/v1/chargelog',
					data:{
						'pageindex':page,
						"card_no":that.cardno
					}
				}).then((res) => {
					let e=res.data;
					console.log("e="+JSON.stringify(e));
					if(e.code==0 && e.success){
					   that.list = e.rows;
					   page++;
					}
				})
			},
			getmorelist(){
				// this.loadingTxt='加载中'
				let that=this;
				that.http.tokenreq({
					url: 'card/v1/chargelog',
					data:{
						'pageindex':page,
						"card_no":that.cardno
					}
				}).then((res) => {
					uni.hideLoading();
					let e=res.data;
					if(e.code==0 && e.success){
						if(e.rows.length==0){
							// that.loadingTxt="已经加载全部";
							return;
						}
						that.list=that.list.concat(e.rows);
						page++;
					}
				})
			},
			onReachBottom() {
				//阻止重复加载
				if(timer !== null){
					clearTimeout(timer)
				}
				timer=setTimeout(()=>this.getmorelist(),500)
			}
		}
	}
</script>

<style>
	uni-view {
	    font-size: 14px;
	    line-height:1.5;
	}
	.foot{
		position:fixed;
		left: 0;
		bottom: 0;
		width:100%;
	}
	.card-use{
		background-color: #FFFFFF;
		padding: 40rpx 30rpx;
		border-radius: 8px;
	}
	.card-img{
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
	}
	.card-text{
		padding-left: 20rpx;
		font-size: 28rpx;
		letter-spacing: 4rpx;
		vertical-align: middle;
		font-weight: 550;
	}
	.card-no{
		padding-left: 10rpx;
		font-size: 32rpx;
		/* letter-spacing: 4rpx; */
		font-weight: 550;
	}
	.textright{
		float: right;
		margin-right: 10rpx;
		vertical-align: middle;
	}
</style>
